<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>追光人书城</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--<link rel="stylesheet" th:href="@{/css/element-ui.css}" href="../static/css/element-ui.css">-->
    <!-- 必须先引入vue，再引入elementui -->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9"></script>-->
    <script th:src="@{/js/vue.js}" src="../static/js/vue.js"></script>
    <!-- 引入elementui组件库-->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script th:src="@{/js/element-ui.js}" src="../static/js/element-ui.js"></script>

    <script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css"  media="all">

    <!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

    <script th:src="@{/js/vue-resource.min.js}" src="../static/js/vue-resource.min.js"></script>
    <script th:src="@{/js/axios.min.js}" src="../static/js/axios.min.js"></script>


</head>

<body>
    <div id="outerBox" class="outerBox">
        <el-container>
            <el-header>
                <div>
                <ul class="layui-nav" lay-bar="disabled">
                    <li class="zdy-nav-item">
                       <span class="zdy-a-nav-item">追光人书城</span>
                    </li>
                  <li class="layui-nav-item">
                    <a th:href="@{/}" href="">去主页<span class=""></span></a>
                  </li>
                  <li class="layui-nav-item">
                    <a  th:href="@{/book1}"  href="/book1">去艺术品专场<span class=""></span></a>
                  </li>
                  <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;"><img th:src="@{/img/RCzsdCq.jpg}" src="../static/img/RCzsdCq.jpg" class="layui-nav-img"></a>
                    <dl class="layui-nav-child">
                      <dd><a href="javascript:;">待发货</a></dd>
                      <dd><a href="javascript:;">已发货</a></dd>
                      <hr>
                      <dd style="text-align: center;"><a href="">售后服务</a></dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </el-header>
            <el-main>
                <el-table :data="students" size="mini"  style="width: 100%"  height="calc(93vh - 148px)">
                    <el-table-column label="序号" width="70" align="center">
                        <template slot-scope="scope">
                            {{ (queryDto.page - 1) * queryDto.size + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="书名" prop="bookName"></el-table-column>
                    <el-table-column label="数量" prop="cartCount">
                        <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.cartCount" @change="handleChange(scope.row.cartCount,scope.row.cartId)" :min="1" :max="100" label="描述文字">
                            </el-input-number>
                        </template>                  
                    </el-table-column>
                    <el-table-column label="单价" prop="cartPrice"></el-table-column>
                    <el-table-column label="总价" prop="cartTotalPrice"></el-table-column>
                    <el-table-column label="操作" width="180" prop="bookName">
                        <template slot-scope="scope">
                            <el-button type="danger" plain icon="el-icon-delete" size="mini"
                                @click="dialogVisibleTrue(scope.row.cartId)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :total="queryDto.total" :page-size="queryDto.size" :current-page="queryDto.page"
                    layout="prev,pager,next,sizes,->,total" :page-sizes="[2, 5, 10, 15]" @current-change="currentChange"
                    @size-change="sizeChange"></el-pagination>
            </el-main>
            <el-footer>
                <div class="cart-footer">
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content bg-purple"></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">总数：{{cartTotal1}}件</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">合计价格：{{cartTotal2}}元</div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">
                                <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteCart">清空购物车</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el: '#outerBox',
        mounted: function () {
            this.get();
        },
        methods: {
            get:function() {
                //发送get请求
                axios.get('http://localhost:8080/cart/table/'+this.queryDto.page+'/'+this.queryDto.size)
                    .then((response)=>{

                        this.students=response.data.pages.records;
                        this.queryDto.total=response.data.pages.total;
                        this.cartTotal1=response.data.cartTotal1;
                        this.cartTotal2=response.data.cartTotal2.toFixed(2);
                    })
                    .catch((error)=>{
                        console.log(error)
                    })
                // this.$http.get("http://localhost:8080/cart/table/1/2").then(function (res) {
                //     console.log(res.body);
                //      this.students=res.body.records;
                //      this.queryDto.total=res.body.total;
                // }, function () {
                //     console.log('请求失败处理');
                // });
            },
            // 删除商品
            dialogVisibleTrue(cartId){
                console.log(cartId);
                this.$confirm('此操作将永久删除该商品项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送get请求
                    axios.get('http://localhost:8080/cart/delete',{params: {
                            cartId : cartId
                        }})
                        .then((response)=>{
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.get();
                        })
                        .catch((error)=>{
                            console.log(error)
                        })

                })
            },
            // 清空购物车
            deleteCart(){

                this.$confirm('总共'+this.cartTotal1+'件商品,总价格为'+this.cartTotal2+'元，请确认支付？', '提示', {
                    confirmButtonText: '已完成支付',
                    cancelButtonText: '取消支付',
                    type: 'warning'
                }).then(() => {
                    //发送get请求
                    axios.get('http://localhost:8080/cart/deleteAll')
                        .then((response)=>{
                            this.$message({
                                type: 'success',
                                message: '支付成功，三天内发货,亲！'
                            });
                            this.get();
                        })
                        .catch((error)=>{
                            console.log(error)
                        })

                })
            },
            handleChange(row1,row2) {

                //发送get请求
                axios.get('http://localhost:8080/cart/updata',{params: {
                    cartId : row2,
                        cartCount: row1
                    }})
                    .then((response)=>{
                        this.get();
                    })
                    .catch((error)=>{
                        console.log(error)
                    })

            },
            // 当前页改变
            currentChange(page) {
                this.queryDto.page = page;
                this.get();
            },
            sizeChange(size) {
                this.queryDto.size = size;
                this.get();
            },
        },
        data() {
            return {
                checked: true,
                cartTotal1: 0,
                cartTotal2: 0,
                queryDto: {
                    page: 1,
                    size: 5,
                    total:null
                },
                students: [
                   /* {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                },
                {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                },
                {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                },
                {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                },{
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }, {
                    bookName: '小说',
                    cartCount: '20',
                    cartPrice: '25',
                    cartTotalPrice: '450',
                }*/]
            }
        }
    })
</script>

</html>

<style>
    .zdy-nav-item{
       float:left;


    }
    .zdy-a-nav-item {
        display: block;
        color: #fff;
        color: rgba(255,255,255,.7);
    }
    .layui-nav .layui-this:after, .layui-nav-bar {
        background-color: #8c222c;

    }
    .layui-nav,.el-header,.el-footer,.bg-purple,.bg-purple-light{
        background-color: #8c222c;
    }
    .el-main .el-table {
        background-color: #ffffff;
    }
    .layui-nav{

    }
     .el-header {

        color: rgb(26, 24, 24);
        text-align: right;
        line-height: 60px;
    }

    .el-footer {

        color: #dcdcdc;
        text-align: left;
        line-height: 60px;
    }
    .el-row {
        margin-bottom: 20px;
        width: auto;
    }

    .bg-purple {

    }

    .bg-purple-light {

    }

    .grid-content {
        min-height: 60px;
        text-align: right;
    }
</style>